<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ref属性</title>
</head>
    <!-- ref  在vue的模板中 我们可以在任何元素中添加ref属性   这样我们就可以在vue实例中引用这些元素      类比document.querySelector("")   -->
<body>
    <div id="app">
       <dom-a></dom-a>
       <dom-b></dom-b>
       <dom-c></dom-c>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var v = new Vue();

    // 组件A
    var A  = {
        template: `
        <div>
                <span>我是A组件的数据->{{a}}</span>
                <input type="button" value="把A数据传给C" @click = "send">
            </div>
        `,
        data() {
            return {
                  a: '我是A组件中的数据'
            }
        },
        methods: {
                send() {
                    v.$emit('a-msg',this.a);
                }
        }
    },
    var B = {
        template: `
        <div>
                <span>我是B组件的数据->{{a}}</span>
                <input type="button" value="把B数据传给C" @click = "send">
            </div>
        `,
        methods: {
            send() {
                v.$emit('b-msg',this.b);
            }
        },
        data() {
            return {
                b: '我是b组件的数据'
            }
        }
    },
    var C = {
        template: `
        <div>
                <h3>我是C组件</h3>
                <span>接收过来A的数据为: {{a}}</span>
                <br>
                <span>接收过来B的数据为: {{b}}</span>
            </div>
        `,
    mounted() {
        //  接收A组件的数据 
        v.$on('a-msg',function(a) {
             this.a =a;
        });

        //  接收B组件的数据 
        v.$on('b-msg',function(b) {
                  this.b = b;
        });
    },
    data() {
        return {
            a:'',
            b:''
        }
    }
    };

    window.onload= function() {
        new Vue({
            el: '#app',
            comments: {
                'dom-a': A,
                'dom-b': B,
                'dom-c': C
            }
        })
    };

</script>
</html>